<template>
  <div class="bg-white">
    <div class="!md:h-1/4">
      <TenantResourceCard></TenantResourceCard>
    </div>
    <div class="md:h-1/4">
      <Tabs tabPosition="left" v-model:activeKey="activeKey">
        <TabPane v-if="checkPowerByName('cceList')" key="1" tab="云容器引擎CCE">
          <Divider orientation="left"
            ><span style="margin-right: 8px; font-weight: bolder">云容器引擎列表</span></Divider
          >
          <TableCard :tableColumns="CCETableColumns" nameSpace="PAAS.AGGR" class="md:mx-10"></TableCard>
        </TabPane>
        <TabPane v-if="checkPowerByName('rdsList')" key="2" tab="关系型数据库RDS">
          <Divider orientation="left"
            ><span style="margin-right: 8px; font-weight: bolder">关系型数库列表</span></Divider
          >
          <TableCard :tableColumns="RDSTableColumns" nameSpace="SYS.RDS" class="md:mx-10"></TableCard>
        </TabPane>
        <TabPane v-if="checkPowerByName('dcsList')" key="3" tab="分布式缓存DCS">
          <Divider orientation="left"
            ><span style="margin-right: 8px; font-weight: bolder">分布式缓存列表</span></Divider
          >
          <TableCard :tableColumns="DCSTableColumns" nameSpace="SYS.DCS" class="md:mx-10"></TableCard>
        </TabPane>
        <TabPane v-if="checkPowerByName('cseList')" key="4" tab="微服务引擎CSE">
          <Divider orientation="left"
            ><span style="margin-right: 8px; font-weight: bolder">微服务引擎列表</span></Divider
          >
          <TableCard :tableColumns="CSETableColumns" nameSpace="NULL" class="md:mx-10"></TableCard>
        </TabPane>
        <template #renderTabBar="{ DefaultTabBar, ...props }">
          <component :is="DefaultTabBar" v-bind="props" :style="{ opacity: 0.8, color: 'grey' }" />
        </template>
      </Tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Divider, Drawer, TabPane, Tabs } from 'ant-design-vue';
import TableCard from '/@/views/maintenance-center/resource-monitor/for-platform/components/tableCard.vue';
import TenantResourceCard from '/@/views/maintenance-center/resource-monitor/for-platform/components/tenantResourceCard.vue';
import { checkPowerByName } from '../../../../utils/permission';

const CCETableColumns = [
  {
    title: '集群名称',
    dataIndex: 'clusterName',
    key: 'clusterName',
    width: '100px',
  },
  {
    title: '集群ID',
    dataIndex: 'clusterId',
    key: 'clusterId',
    width: '100px',
  },
  {
    title: '集群状态',
    dataIndex: 'phase',
    key: 'phase',
    width: '100px',
  },
  {
    title: '可用节点/总数',
    dataIndex: 'nodes',
    key: 'nodes',
    width: '100px',
  },
  {
    title: 'CPU使用率',
    dataIndex: 'cpuUtil',
    key: 'cpuUtil',
    width: '100px',
  },
  {
    title: '内存使用率',
    dataIndex: 'memUtil',
    key: 'memUtil',
    width: '100px',
  },

  {
    title: '集群类别',
    dataIndex: 'category',
    key: 'category',
    width: '100px',
  },
  {
    title: '集群创建时间',
    dataIndex: 'creationTimestamp',
    key: 'creationTimestamp',
    width: '100px',
  },
  {
    title: '集群规格',
    dataIndex: 'flavor',
    key: 'flavor',
    width: '100px',
  },
  {
    title: '集群版本',
    dataIndex: 'version',
    key: 'version',
    width: '100px',
  },
  {
    title: '计费方式',
    dataIndex: 'billingMode',
    key: 'billingMode',
    width: '100px',
  },
  {
    title: '计费方式',
    dataIndex: 'billingMode',
    key: 'billingMode',
    width: '100px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    width: '100px',
  },
];
const CSETableColumns = [
  {
    title: '引擎名称',
    dataIndex: 'engineName',
    key: 'engineName',
    width: '100px',
  },
  {
    title: '引擎ID',
    dataIndex: 'engineId',
    key: 'engineId',
    width: '100px',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    width: '100px',
  },
  {
    title: '实例数配额',
    dataIndex: 'instance',
    key: 'instance',
    width: '100px',
  },
  {
    title: '配置条目配额',
    dataIndex: 'config',
    key: 'config',
    width: '100px',
  },
  {
    title: '服务注册发现地址',
    dataIndex: 'serviceCenter',
    key: 'serviceCenter',
    width: '100px',
  },
  {
    title: '配置中心地址',
    dataIndex: 'kie',
    key: 'kie',
    width: '100px',
  },

  {
    title: '引擎类型',
    dataIndex: 'type',
    key: 'type',
    width: '100px',
  },

  {
    title: '规格',
    dataIndex: 'flavor',
    key: 'flavor',
    width: '100px',
  },
  {
    title: '版本',
    dataIndex: 'version',
    key: 'version',
    width: '100px',
  },
  {
    title: '计费模式',
    dataIndex: 'payment',
    key: 'payment',
    width: '100px',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: '100px',
  },
  {
    title: '公网IP',
    dataIndex: 'publicAddress',
    key: 'publicAddress',
    width: '100px',
  },
  {
    title: '认证方式',
    dataIndex: 'authType',
    key: 'authType',
    width: '100px',
  },
];
const DCSTableColumns = [
  {
    title: '实例名称',
    dataIndex: 'instanceName',
    key: 'instanceName',
    width: '100px',
  },
  {
    title: '实例ID',
    dataIndex: 'instanceId',
    key: 'instanceId',
    width: '100px',
  },

  {
    title: '实例状态',
    dataIndex: 'status',
    key: 'status',
    width: '100px',
  },
  {
    title: '引擎类型',
    dataIndex: 'engine',
    key: 'engine',
    width: '100px',
  },
  {
    title: '缓存版本',
    dataIndex: 'engineVersion',
    key: 'engineVersion',
    width: '100px',
  },
  {
    title: 'CPU类型',
    dataIndex: 'cpuType',
    key: 'cpuType',
    width: '100px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    width: '100px',
  },
];
const RDSTableColumns = [
  {
    title: '实例名称',
    dataIndex: 'instanceName',
    key: 'instanceName',
    width: '100px',
  },
  {
    title: '实例ID',
    dataIndex: 'instanceId',
    key: 'instanceId',
    width: '100px',
  },
  {
    title: '实例状态',
    dataIndex: 'status',
    key: 'status',
    width: '100px',
  },
  {
    title: '数据库引擎',
    dataIndex: 'type',
    key: 'type',
    width: '100px',
  },
  {
    title: '数据库版本',
    dataIndex: 'version',
    key: 'version',
    width: '100px',
  },
  {
    title: 'CPU使用率',
    dataIndex: 'cpuUtil',
    key: 'cpuUtil',
    width: '100px',
  },
  {
    title: '内存使用率',
    dataIndex: 'memUtil',
    key: 'memUtil',
    width: '100px',
  },
  {
    title: '磁盘使用率',
    dataIndex: 'diskUtil',
    key: 'diskUtil',
    width: '100px',
  },
  {
    title: '磁盘总大小',
    dataIndex: 'diskTotalSiza',
    key: 'diskTotalSiza',
    width: '100px',
  },
  {
    title: '磁盘使用量',
    dataIndex: 'diskUsedSiza',
    key: 'diskUsedSiza',
    width: '100px',
  },
  {
    title: '操作',
    dataIndex: 'action',
    slots: {
      customRender: 'action',
    },
    width: '100px',
  },
];
export default defineComponent({
  components: {
    TenantResourceCard,
    TableCard,
    Divider,
    Tabs,
    TabPane,
    Drawer,
  },
  setup() {
    return {
      CCETableColumns,
      RDSTableColumns,
      DCSTableColumns,
      CSETableColumns,
      activeKey: ref('1'),
      checkPowerByName,
    };
  },
});
</script>
